<template>
  <div style="padding: 8px;box-sizing: border-box;">
    <div ref="contentRef" style="width: 100%;height: calc(100vh  -  120px);">
      3d新机房
    </div>
  </div> 
</template>

<script setup lang="ts">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { ref, onMounted } from 'vue';
var camera: any, scene: any, renderer: any, controls: any;
const contentRef = ref<HTMLElement>();

onMounted(() => {
  function initScene() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000); // 设置场景背景颜色为黑色
  }

  // 初始化相机
  function initCamera() {
    camera = new THREE.PerspectiveCamera(75, contentRef.value?.clientWidth / contentRef.value?.clientHeight, 0.1, 10000);
    camera.position.set(5, 10, 20);
    // camera.position.z = 5;
  }

  // 初始化灯光
  function initLight() {
    var directionalLight: any = new THREE.DirectionalLight(0xffffff, 0.3); //模拟远处类似太阳的光源
    directionalLight.color.setHSL(0.1, 1, 0.95);
    directionalLight.position.set(0, 200, 0).normalize();
    scene.add(directionalLight);

    var ambient: any = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
    ambient.position.set(0, 0, 0);
    scene.add(ambient);
  }
  function initHouse() {
    //   const geometry = new THREE.BoxGeometry(40, 40, 40);
    // //   立方体纹理加载

    //     //     右  左   后  前  下  上
    //     let arr = [
    //       'https://picx.zhimg.com/80/v2-77cbd84c0a2b3ea29d2f347494eb920a_720w.webp?source=1def8aca',
    //       'https://picx.zhimg.com/80/v2-5987f0c73fdd9b74dbf5190c20669706_720w.webp?source=1def8aca',
    //       'https://pic1.zhimg.com/80/v2-206ee44ebb145f53dff134642923f8f5_720w.webp?source=1def8aca',
    //       'https://pica.zhimg.com/80/v2-45911f5335ce738b4ba021a3e8b603fd_720w.webp?source=1def8aca',

    //       'https://picx.zhimg.com/80/v2-4660b57ce0117da1efc40ad5b706a53d_720w.webp?source=1def8aca'
    //       // 'https://picx.zhimg.com/80/v2-956dda8e4c2deabcdbb473cb49ea2b97_720w.webp?source=1def8aca'
    //     ];
    //   let arr = [1, 2, 3, 4, 5, 6];
    //   let boxMaterials = [];
    //   arr.forEach((item) => {
    //     // const texttrue = new THREE.TextureLoader().load(item); // 纹理贴纸
    //     const texttrue = new THREE.TextureLoader().load(item); // 纹理贴纸
    //     boxMaterials.push(
    //       new THREE.MeshBasicMaterial({
    //         color: '#ffffff',
    //         map: texttrue
    //       })
    //     );
    //     // }
    //   });
    //   const mesh = new THREE.Mesh(geometry, boxMaterials);
    //   mesh.geometry.scale(1, 1, -1); // 进入内部
    //   scene.add(mesh);
    // ----------------------------------------------------------------------------------
    // // 创建房间的墙壁 长 高 宽
    // var geometry = new THREE.BoxGeometry(30, 5, 20);
    // // var material = new THREE.MeshBasicMaterial({ color: 0x808080, side: THREE.BackSide });
    // // 设置墙壁每个面的颜色
    // var materials: any = [
    //   new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 右侧面 - 红色
    //   new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 左侧面 - 绿色
    //   // new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 顶部面 - 蓝色
    //   new THREE.MeshBasicMaterial({ transparent: true }), //顶部面 - 蓝色
    //   new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 底部面 - 黄色
    //   new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 正面 - 品红
    //   new THREE.MeshBasicMaterial({ color: 0x00ffff }) // 背面 - 青色
    // ];
    // var room = new THREE.Mesh(geometry, materials); scene.add(room);
    // -------------------------------------------------------------------------------------

    const roomWidth = 5
    const roomHeight = 100
    const roomDepth = 100
    // 创建房间的墙壁
    var geometry = new THREE.BoxGeometry(roomWidth, roomHeight, roomDepth);

    // 右侧面 - 红色
    var rightWall: any = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xff0000 }));
    rightWall.position.x = 300 / 2;
    scene.add(rightWall);

    // 左侧面 - 绿色
    var leftWall: any = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
    leftWall.position.x = -300/2
    scene.add(leftWall);

    // 底部面 - 黄色
    var bottomWall: any = new THREE.Mesh(new THREE.BoxGeometry(5, 300, 100), new THREE.MeshBasicMaterial({ color: 0xffff00 }));
    bottomWall.position.y = -roomHeight / 2;
    bottomWall.rotation.z = Math.PI / 2; // 顺时针旋转底部面90度
    scene.add(bottomWall);

    // 正面 - 品红
    var frontWall: any = new THREE.Mesh((new THREE.BoxGeometry(5, 100, 300)), new THREE.MeshBasicMaterial({ color: 0xff00ff }));
    frontWall.position.z = roomDepth / 2;
    frontWall.rotation.y = Math.PI / 2; // 顺时针旋转正面90度
    scene.add(frontWall);

    // 背面 - 青色
    var backWall: any = new THREE.Mesh(new THREE.BoxGeometry(5, 100, 300), new THREE.MeshBasicMaterial({ color: 0x00ffff }));
    backWall.position.z = -roomDepth / 2;
    backWall.rotation.y = Math.PI / 2; // 顺时针旋转背面90度
    scene.add(backWall);
  }

  // 初始化渲染器
  function initRenderer() {
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setSize(contentRef.value?.clientWidth, contentRef.value?.clientHeight);
    renderer.setClearColor(0x4682b4, 1.0);
    //   document.body.appendChild(renderer.domElement);
    contentRef.value.appendChild(renderer.domElement);
  }

  // 初始控制
  function initControls() {
    controls = new OrbitControls(camera, renderer.domElement);
  }

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }

  function init() {
    initScene();
    initCamera();
    initLight();
    initHouse();
    initRenderer();
    initControls();
    animate();
  }
  init();
});
</script>

<style scoped lang="scss">
</style>